<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin:  0; /* 将所有的元素 边距设置为0 */
			}
			
			#box { /* 浮动元素, 无法撑开 父元素的大小 */
				overflow: auto;   /* 将父元素的 大小变更为自动 */
				width: 750px;
				margin: auto; /* 设置父元素与网页左右两边边距相等, 这样内部元素就会自动居中 
								 仅仅在水平方向有效*/
			}
		
			.item {
				
				float: left;   /* 设置浮动 ,左侧 */
				margin: 20px;   /* 设置全部边距 */
				margin-top: 21px;  /* 设置顶部边距 */
				border: 5px solid black;  /* 设置边框宽度, 样式, 颜色 */
				padding: 15px;  /* 设置内边距 */
			}
			
			</style>
	</head>
	<body>
		<div id="box">
			<div class="item">
				<img src="img/hali1.png" alt="">
				<br/>测试文字内容
			</div>
			<div class="item">
				<img src="img/hali2.png" alt="">
				<br/>测试文字内容
			</div>
			<div class="item">
				<img src="img/meirenyu.png" alt="">
				<br/>测试文字内容
			</div>
		</div>
		
	</body>
</html>